<template>
	<view class="qp">
		<sc-no v-if="!cartNo.list.length && !cartNo.nolist.length" :noStatus="true" @navtive="navtive" url="add_images/no-cart.png" :nofont="nofont" :noBtn="noBtn"></sc-no>
		<view class="cart-flex" v-else>
			<view style="box-sizing: border-box;">
				<view class="tips">
					<view class="tips-img"><image :src="Url+'add_images/cart-top.png'" mode="widthFix"></image><text>购物车</text></view>
					<view class="tips_wz" @tap="del">
						删除
					</view>
				</view>
			</view>
			<view class="product">
				<view class="list" v-for="(items, index) in cartNo.list" :key="index" >
					<view class="remove" :class="items.checked ? '' : 'remove-checked'" @tap="onSel(index,items.checked)" v-if="items.stock">
						<image 
						v-if="items.checked"
						:src="Url+'mine/index/true.png'" mode=""></image>
					</view>
					<view class="remove remove-checked" v-else>
						<!-- <image :src="Url+'mine/index/true.png'" mode=""></image> -->
					</view>
					<view class="pic" @tap="detailTap(items)"><image :src="items.img" mode=""></image></view>
					<view class="info" >
						<view class="info_tilte" @tap="detailTap(items)">{{items.name}}</view>
						<view class="desc overhidden">{{items.size_info}}</view>
						<view class="f-x" v-if="items.stock">
							<view class="price">
								<text class="price_now">￥{{items.price}}</text>
								<text class="price_line" v-if="items.cost_price">￥{{items.cost_price}}</text>
							</view>
							<view class="add_delet">
								<view class="add">
									<image class="icon-img" @tap.stop="deletnum(index,items)" :src="Url+'add_images/ic-jj.png'"></image>
									<text class="num">{{ items.num }}</text>
									<image class="icon-img" @tap.stop="addnum(index,items)" :src="Url+'index/ic-add.png'"></image>
								</view>
							</view>
						</view>
						<view class="info-shixiao" v-else>
							<text>已失效</text>
							<text>商品库存不足</text>
						</view>
						<!-- <slot @tap="change(index,key)" name="add_delet"></slot> -->
					</view>
				</view>
				<view class="on" v-if="cartNo.nolist.length">
					<view class="on-flex">
						<text>失效商品</text>
						<text @tap="clearPro">清空失效商品</text>
					</view>
					<view class="list" v-for="(items,index) in cartNo.nolist" :key="index" :style="{opacity:items.stock ? '1' : '0.6'}">
						<view class="remove remove-checked" >
							<!-- <image :src="Url+'mine/index/true.png'" mode=""></image> -->
						</view>
						<view class="pic" @tap="detailTap(items)"><image :src="items.img" mode=""></image></view>
						<view class="info">
							<view class="info_tilte" @tap="detailTap(items)">{{items.name}}</view>
							<view class="desc overhidden">{{items.size_info}}</view>
							<view class="f-x" v-if="items.stock">
								<view class="price">
									<text class="price_now">￥{{items.price}}</text>
									<text class="price_line" v-if="items.cost_price">￥{{items.cost_price}}</text>
								</view>
								<view class="add_delet">
									<view class="add">
										<image class="icon-img" @tap.stop="deletnum(index,items)" :src="Url+'add_images/ic-jj.png'"></image>
										<text class="num">{{ items.num }}</text>
										<image class="icon-img" @tap.stop="addnum(index,items)" :src="Url+'index/ic-add.png'"></image>
									</view>
								</view>
							</view>
							<view class="info-shixiao" v-else>
								<text>已失效</text>
								<text>商品库存不足</text>
							</view>
							<!-- <slot @tap="change(index,key)" name="add_delet"></slot> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view style="box-sizing: border-box;" v-if="cartNo.list.length">
				<view class="paybtn">
					<view class="paybtn_l" @tap="onAllSel">
						<view class="allCheck">
							<view class="allCheck_pic" :class="allSel ? '' : 'allCheck_checked'">
								<image v-if="allSel" 
								:src="Url+'mine/index/true.png'" mode=""></image>
							</view>
							全选
						</view>
					</view>
					<view class="allcheck-right">
						<view class="cart_price" >合计：￥{{totalCount.totalPrice}}</view>
						<view class="topay" v-if="!selectedIdsArray.length && !isSel">去结算</view>
						<view class="topay" v-else @tap="topay">去结算({{selectedIdsArray.length}})</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-view">
				<text class="popup-title">提示</text>
				<view class="popup-li">
					<text>您是否要删除已选中的商品</text>
					<view class="popup-btn">
						<view @tap="$refs.popup.close()">取消</view>
						<view @tap="goodsDelete">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-login ref='login' @success="loginSuccess"></uni-login>
	</view>
</template>

<script>
import cartProduct from '@/components/shoppingcart/cartProduct.vue';
import scNo from '@/components/sc-no/sc-no.vue';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import uniLoadMore from '@/components/uni-load-more.vue';
import {carthtp,cartSubmit} from '@/common/index.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import {debounce} from '@/static/js/utils.js';
export default {
	components: {
		cartProduct,scNo,uniLoadMore,uniPopup
	},
	data() {
		return {
			allCheck : true,
			procuctNum: '',
			Url:this.Imgurl,
			proHeight:0,
			page:1,
			selectedIdsArray:[],
			nofont:'购物车空空如也',
			noBtn:'去逛逛'
		};
	},
	computed:{
		...mapState({
			cartList: ({ cart }) => cart.cartList,
			allSel: ({ cart }) => cart.allSelected
		}),
		...mapGetters(['totalCount', 'isSel']),
		cartNo(){
			let nolist = [],
			    list = [];
		    const {cartList} = this;
			cartList.forEach((i,n)=>{
				// console.log(i)
				if(i.stock){
					list.push(i)
				}else{
					nolist.push(i)
				}
			})
			return {nolist,list};
		}
	},
	created() {
		// const {cartList} = this;
		// let list = [],
		// 	nolist = [];
		// cartList.forEach((i,n)=>{
		// 	console.log(i)
		// 	if(i.stock){
		// 		list.push(i)
		// 	}else{
		// 		nolist.push(i)
		// 	}
		// })
		// console.log(list,nolist)
		this.getCartList()
	},
	onShow() {
		if(uni.getSystemInfoSync().version){
			this.noBtn = uni.getStorageSync('token') ? '去逛逛' : '去登录';	
			// if(!uni.getStorageSync('token')){
			   
			// }
		}
	},
	methods: {
		...mapActions(['getCartList', 'changeCartList']),
		login() {
			if(uni.getSystemInfoSync().version){
			   this.$refs.login.show = true;	
			}
		},
		loginSuccess(){
			this.noBtn = '去逛逛'
			this.getCartList()
		},
		clearPro(){
			const { cartNo } = this;
			let selectedIdsArray = [];
			let that = this;
			uni.showModal({
			    content: '确定清空所有失效商品吗',
				cancelText:'暂不',
				confirmText:'清空',
			    success: function (res) {
			        if (res.confirm) {
			            cartNo.nolist.map(item => {
			            	selectedIdsArray.push(item.id);
			            });
			            that.changeCartList({ ids: selectedIdsArray, art: 'del' });
			        } else if (res.cancel) {
			            
			        }
			    }
			});
		},
		//跳转详情
		detailTap(item){
			uni.navigateTo({
				url:'/pageB/classify/productdetail?type=1&id='+item.goods_id
			})
		},
		//去结算
		topay(){
			let { selectedIdsArray,isSel } = this;
			if(!isSel){
				return false;
			}else{
				let params = {
					card_id:selectedIdsArray,
					type:1
				}
				let data = JSON.stringify(params);
				// console.log(data)
				cartSubmit({card_id:selectedIdsArray}).then(res=>{
					if(res.code == 1){
						uni.navigateTo({
							url:'/pageB/order/confirmorder?data='+data
						})
					}else{
						this.toast(res.msg)
					}
				}).catch()
			}
		},
		navtive(){
			// this.toast('跳转')
			if(!uni.getStorageSync('token') && uni.getSystemInfoSync().version){
				this.login()
			}else{
			  uni.switchTab({
			  	url:'../classify/classify'
			  })	
			}
		},
		del(){
			let that = this;
			let { selectedIdsArray } = this;
			// let selectedIdsArray = [];
			// cartList.map(item => {
			// 	if (item.checked) {
			// 		selectedIdsArray.push(item.id);
			// 	}
			// });
			if(selectedIdsArray.length){
				this.$refs.popup.open()
			}
		},
		goodsDelete() {
			let that = this;
			let { selectedIdsArray } = this;
			// let selectedIdsArray = [];
			// cartList.map(item => {
			// 	if (item.checked) {
			// 		selectedIdsArray.push(item.id);
			// 	}
			// });
			this.changeCartList({ ids: selectedIdsArray, art: 'del' });
			this.$refs.popup.close()
		},
		onSel(index, flag) {
			let that = this;
			// console.log(index)
			that.$store.commit('selectItem', { index, flag });
			let { cartList } = this;
			let selectedIdsArray = [];
			cartList.map(item => {
				if (item.checked) {
					selectedIdsArray.push(item.id);
				}
			});
			this.selectedIdsArray = selectedIdsArray
			// console.log(selectedIdsArray)
		},
		onAllSel() {
			let that = this;
			that.$store.commit('changeAllSellect'); //按钮切换全选。
			that.$store.commit('getAllSellectCartList', that.allSel); //列表全选
			let { cartList } = this;
			let selectedIdsArray = [];
			cartList.map(item => {
				if (item.checked) {
					selectedIdsArray.push(item.id);
				}
			});
			this.selectedIdsArray = selectedIdsArray
		},
		// 改变商品数量
		deletnum:debounce(function(index,item){
			const {cartNo} = this;
			console.log(index,item,cartNo.list[index].num)
			if (cartNo.list[index].num == 1) return false;
			this.changeCartList({ add:{type:2,id:item.id},index:index, art: 'add' }).then(res=>{
				// console.log(res)
				// this.cartNo.list[index].num--;
			});
		},300),
		addnum:debounce(function(index,item){
			this.changeCartList({ add:{type:1,id:item.id},index:index, art: 'add' }).then(res=>{
				// this.cartNo.list[index].num++;
			}).catch(erro=>{
				this.toast(erro.msg)
			});
		},300),
		empity() {
			uni.showModal({
				title: '提示',
				content: '您确定要删除已勾选的商品吗？',
				showCancel: true,
				success: res => {
					if (res.confirm) {
						
						this.productList = [];
					}
				}
			});
		}
	}
};
</script>
<style>
	page{
		-webkit-overflow-scrolling: touch;
		height: 100%;
		background: #f6f6f6;
		width: 100%;
		font-size: 15px;
		font-family: NotoSansHans-Bold;
		color: #333;
		overflow-x: hidden;
	}
</style>
<style lang="scss" scoped>
	.on{
		background-color: #FFFFFF;
		border-radius: 10upx;
		.list{
			margin: 0;
			border-radius: 0;
			border-bottom: 2upx solid #f0f0f0;
			&:last-child{
				border: none;
			}
		}
		&-flex{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:28upx 26upx;
			box-sizing: border-box;
			border-bottom: 2upx solid #f0f0f0;
			text{
				font-size: 30upx;
				color: #333333;
				&:last-child{
					padding: 6upx 20upx;
					border-radius: 40upx;
					border:2upx solid #666666;
					text-align: center;
					font-size: 24upx;
				}
			}
		}
	}
	.info-shixiao{
		text{
			display: block;
			&:first-child{
				    display: block;
				    max-width: 64px;
				    padding: 1px;
				    text-align: center;
				    background-color: #F9F9F9;
				    border-radius: 5px;
				    font-size: 12px;
				    border: 1px solid #999999;
				    margin: 5px 0;
			}
			    font-size: 12px;
			    color: #666;
		}
	}
	.f-x{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40upx;
	}
	uni-page-body {
	    -webkit-overflow-scrolling: touch;
	    height: 100%;
	    background: #f6f6f6;
	    width: 100%;
	    font-size: 15px;
	    font-family: NotoSansHans-Bold;
	    color: #333;
	    overflow-x: hidden;
	}
	.popup-view{
		background-color: #FFFFFF;
		// width: 564upx;
		padding: 43upx 0;
		box-sizing: border-box;
		border-radius: 10upx;
		.popup-title{
			font-size: 34upx;
			color: #333333;
			text-align: center;
			display: block;
		}
		.popup-li{
			text{
				font-size: 30upx;
				color: #999999;
				text-align: center;
				display: block;
				margin-top: 34upx;
			}
		}
		.popup-btn{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:30upx 0;
			view{
				width: 220upx;
				height: 68upx;
				border-radius: 34upx;
				font-size: 30upx;
				color: #999999;
				line-height:68upx;
				text-align: center;
				margin:0 30upx;
				&:first-child{
					border: 2upx solid #999999;
				}
				&:last-child{
					background-color: #FF2842;
					color: #FFFFFF;
				}
			}
		}
	}
	.qp{
		height: 100%;
	}
.cart-flex{
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-x: hidden;
}
.tips {
	width: 100%;
	// height: 70upx;
	background-color: #FFFFFF;
	padding:30upx;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
	justify-content: center;
	font-size: 30upx;
	color: #333333;
	.tips-img{
		display: flex;
		align-items: center;
		image{
			width: 29upx;
			height: 29upx;
			margin-right: 14upx;
		}
	}
	.tips_wz {
		font-size: 26upx;
		color: #666666;
		line-height:32upx;
		position:absolute;
		width:65upx;
		height: 100%;
		top: 0;
		right:15upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.add_delet {
	// position: absolute;
	// bottom: 20upx;
	// right: 0;
	.delet {
		text-align: right;
		.icon {
			font-size:35upx;
			color: #999999;
		}
	}
	.add {
		.icon {
			font-size: 35upx;
			color: #f73e2f;
		}
		text {
			font-size: 30upx;
			margin: 0 10upx;
		}
	}
}
.paybtn {
	width:100%;
	height: 94upx;
	// position: fixed;
	// bottom: var(--window-bottom);
	// left: 50%;
	// transform: translate(-50%);
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	background-color: #333333;
	.paybtn_l {
		padding-left: 30upx;

		display: flex;
	}
	.cart_price {
		line-height: 94upx;
		padding-right: 30upx;
		color: #ffffff;
		font-size: 28upx;
		background-color: #333333;
	}
	.allcheck-right{
		display: flex;
		align-items: center;
	}
	.topay {
		width:200upx;
		height: 100%;
		text-align: center;
		line-height: 94upx;
		font-size:28upx;
		color: #fff;
		background:linear-gradient(90deg,rgba(255,40,66,1),rgba(255,94,113,1));
	}
	.allCheck{
		display: flex;
		align-items: center;
		font-size: 28upx;
		color: #FFFFFF;
		line-height: 94upx;
		.allCheck_checked{
			border: 4upx solid #FFFFFF;
		}
		.allCheck_pic {
			width: 36upx;
			height: 36upx;
			border-radius: 50%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.nocar {
	width: 100%;
	text-align: center;
	image {
		width: 253upx;
		height: 128upx;
		display: block;
		margin: auto;
		margin-top: 300upx;
	}
	.nocar_wz {
		font-size: 28upx;
		color: #999999;
		margin-top: 40upx;
	}
}
.product {
	width: calc(100% - 30upx);
	margin: auto;
	box-sizing: border-box;
	padding-top: 15upx;
	flex: 1;
	    overflow-y: auto;
}
.list {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	border-radius: 20upx;
	padding:30upx 15upx;
	box-sizing: border-box;
	margin-bottom: 10upx;
	.pic {
		width: 176upx;
		height: 176upx;
		border-radius: 5upx;
		// margin-right: 10upx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 5upx;
		}
	}
	.remove-checked{
		border: 2upx solid #e1e1e1;
	}
	.remove {
		width: 40upx;
		height: 40upx;
		box-sizing: border-box;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-right: 30upx;
		// margin-right: 10upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.info {
		width: 450upx;
		position: relative;
		// padding: 30upx 0;
		box-sizing: border-box;
		min-height:186upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.info_tilte {
			font-size: 28upx;
			color: #333333;
			line-height: 40upx;
			height:40upx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.desc {
			font-size: 24upx;
			color: #999999;
			line-height: 32upx;
			display: block;
			height: 40upx;
			margin-top: 10upx;
		}
		.price {
			.price_now {
				font-size: 28upx;
				color: #FF2842;
				line-height: 40upx;
				font-weight: bold;
			}
			.price_line {
				font-size: 24upx;
				color: #999;
				line-height: 40upx;
				text-decoration: line-through;
				margin-left: 10upx;
			}
		}
		.add_delet {
			// position: absolute;
			// bottom: 20upx;
			// right: 0;
			.delet {
				text-align: right;
				.icon {
					font-size: 28upx;
					color: #999999;
				}
			}
			.add {
				display: flex;
				align-items: center;
				.icon-img{
					width: 40upx;
					height: 40upx;
					border-radius: 50%;
				}
				.icon {
					font-size:40upx;
					color: #999999;
				}
				text {
					width:45upx;
					text-align: center;
					font-size:30upx;
					margin: 0 10upx;
				}
			}
		}
	}
}
.like {
	width: 100%;
	margin-bottom: 100upx;
	.like_one {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.like_one_line {
			width: 140upx;
			height: 2upx;
			background-color: #E1E1E1;
		}
		.like_one_title {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #333333;
			margin: 0 20upx;
			image {
				width: 34upx;
				height: 34upx;
			}
		}
	}
	.likeProduct {
		width: 100%;
		padding: 0 15upx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.likeProduct_list {
			width: 350upx;
			height: 530upx;
			border-radius: 10upx;
			overflow: hidden;
			background-color: #FFFFFF;
			margin-bottom: 20upx;
			.likeProduct_list_pic {
				width: 350upx;
				height: 350upx;
			}
			.likeProduct_list_info {
				width: 100%;
				box-sizing: border-box;
				padding: 0 20upx;
				position: relative;
			}
			.likeProduct_list_info_add {
				position: absolute;
				width: 40upx;
				height: 40upx;
				bottom: 0;
				right: 20upx;
			}
			.likeProduct_list_title {
				font-size: 28upx;
				color: #333333;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.likeProduct_list_discount {
				height: 32upx;
				width: 200upx;
				border-radius: 4rpx;
				overflow: hidden;
				display: flex;
				background-color: #f39981;
				font-size: 24upx;
				line-height: 32upx;
				color: #FFFFFF;
				margin: 8upx 0;
				.likeProduct_list_discount_l {
					width: 32upx;
					height: 32upx;
					background-color: #f73e2f;
					text-align: center;
					line-height: 32upx;
					font-size: 24upx;
					color: #FFFFFF;
					margin-right: 6upx;
				}
			}
			.likeProduct_list_linePrice {
				font-size: 24upx;
				color: #999999;
				text-decoration: line-through;
				line-height: 40upx;
			}
			.likeProduct_list_price {
				font-size: 28upx;
				color: #f73e2f;
			}
		}
	}
}
.list:last-child .info {
	border-bottom: none;
}
</style>
